<!DOCTYPE html>
<html>
<head>
	<title>requestAnimationFrame</title>
	<style>
	    *{
	    	margin: 0px;
	    	padding: 0px;
	    }
		body,html{
			height: 100%;
			width: 100%;
		}
		.box{
			position: absolute;
			left: -200px;
			height: 100%;
			width: 200px;
            background-color: red;
		}
	</style>
</head>
<body>
<div id="box" class="box">
	
</div>
<button id="btn" type="button">点我</button>
<script>
	var oBtn = document.getElementById('btn');
	var oBox = document.getElementById('box');
	var timer = null;
	oBtn.onclick = function(){
		cancelAnimationFrame(timer);
		timer = requestAnimationFrame(function fn(){
				console.log(oBox.offsetLeft)
	        if(parseInt(oBox.offsetLeft) < 0){
	        	console.log(1)
	            oBox.style.left = parseInt(oBox.offsetLeft) + 5 + 'px';
	            oBox.style.animation = "all 2s ease-in"
	            timer = requestAnimationFrame(fn);
	        }else{
	            cancelAnimationFrame(timer);
	        }    
	    });
	}
</script>
</body>
</html>